<!DOCTYPE html>
<html>
<head>
<title>Static Force Analysis</title>
</head>
<body>
<canvas id="myCanvas" width="450" height="400" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Parameters for the drawing, chosen to match the style of the original image
    const r = 60; // radius of the pipes
    const mainLineWidth = 4;
    const hatchLineWidth = 3.5;
    const hatchSpacing = 8;
    const hatchLength = 15; // Visual length of hatch marks

    // Calculate coordinates to center the drawing
    const canvasWidth = canvas.width;
    const canvasHeight = canvas.height;

    // The geometric width and height of the pipe and wall structure
    const totalWidth = 4 * r;
    const totalHeight = r + r * Math.sqrt(3);

    // Position the structure on the canvas
    const startX = (canvasWidth - totalWidth) / 2;
    const y_ground = canvasHeight / 2 + totalHeight / 2 + 10;
    
    // Define key coordinates
    const x_wall_L = startX;
    const x_wall_R = startX + 4 * r;

    // Center points of the three circles (pipes)
    const center_left_pipe = { x: x_wall_L + r, y: y_ground - r };
    const center_right_pipe = { x: x_wall_L + 3 * r, y: y_ground - r };
    const center_top_pipe = { x: x_wall_L + 2 * r, y: y_ground - r - r * Math.sqrt(3) };

    // Set line styles for the main shapes
    ctx.strokeStyle = 'black';
    ctx.lineWidth = mainLineWidth;
    ctx.lineCap = 'round';

    // --- Draw the three pipes ---
    ctx.beginPath();
    ctx.arc(center_left_pipe.x, center_left_pipe.y, r, 0, 2 * Math.PI);
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(center_right_pipe.x, center_right_pipe.y, r, 0, 2 * Math.PI);
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(center_top_pipe.x, center_top_pipe.y, r, 0, 2 * Math.PI);
    ctx.stroke();

    // --- Draw the main outlines of the ground and walls ---
    ctx.beginPath();
    // Ground line
    ctx.moveTo(x_wall_L, y_ground);
    ctx.lineTo(x_wall_R, y_ground);
    
    // Wall lines (extend slightly above the pipes for visual clarity)
    const wallTopY = center_top_pipe.y - r - 15;
    ctx.moveTo(x_wall_L, y_ground);
    ctx.lineTo(x_wall_L, wallTopY);
    ctx.moveTo(x_wall_R, y_ground);
    ctx.lineTo(x_wall_R, wallTopY);
    ctx.stroke();

    // --- Draw Hatching to represent the surfaces ---
    ctx.lineWidth = hatchLineWidth;

    // Ground Hatching
    // Draw a series of thick diagonal lines to create the hatching effect
    ctx.beginPath();
    for (let x = x_wall_L - hatchLength; x < x_wall_R + hatchLength; x += hatchSpacing) {
        ctx.moveTo(x, y_ground);
        ctx.lineTo(x - hatchLength, y_ground + hatchLength);
    }
    ctx.stroke();

    // Left Wall Hatching
    const leftWallHeight = y_ground - wallTopY;
    ctx.beginPath();
    for (let i = 0; i * hatchSpacing < leftWallHeight + 2 * hatchLength; i++) {
        // Start lines along a diagonal to create a consistent pattern
        const startPointX = x_wall_L - i * hatchSpacing;
        const startPointY = wallTopY;
        ctx.moveTo(startPointX, startPointY);
        ctx.lineTo(startPointX - hatchLength, startPointY + hatchLength);

        // Add extra lines to fill the corner
        if (i > 0) {
           const cornerPointX = x_wall_L;
           const cornerPointY = wallTopY + i * hatchSpacing;
           ctx.moveTo(cornerPointX, cornerPointY);
           ctx.lineTo(cornerPointX - hatchLength, cornerPointY + hatchLength);
        }
    }
    ctx.stroke();

    // Right Wall Hatching
    const rightWallHeight = y_ground - wallTopY;
    ctx.beginPath();
    for (let i = 0; i * hatchSpacing < rightWallHeight + 2 * hatchLength; i++) {
         const startPointX = x_wall_R - i * hatchSpacing;
         const startPointY = wallTopY;
         ctx.moveTo(startPointX, startPointY);
         ctx.lineTo(startPointX - hatchLength, startPointY + hatchLength);
         if(i > 0){
            const cornerPointX = x_wall_R;
            const cornerPointY = wallTopY + i * hatchSpacing;
            ctx.moveTo(cornerPointX, cornerPointY);
            ctx.lineTo(cornerPointX - hatchLength, cornerPointY + hatchLength);
         }
    }
    ctx.stroke();

</script>
</body>
</html>